import React, { Component } from 'react';
import './App.css';
import { BrowserRouter, Route, Switch, NavLink } from 'react-router-dom';

import Home from './Home';
import AddPrize from './AddPrize';
import User from './User';

class App extends Component {

  render() {
    const activeStyle = { color: 'red' };
    return (

      <BrowserRouter >
        <div className="container">
          <nav className='nav navbar-default'>
            <div className="container-fluid">
              用户管理
            </div>
            <ul className="nav">
              <li className='navbar-nav'><NavLink exact activeStyle={activeStyle} to="/">首页</NavLink></li>
              <li className='navbar-nav'><NavLink activeStyle={activeStyle} to="/user">用户管理</NavLink></li>
              <li className='navbar-nav'><NavLink activeStyle={activeStyle} to="/profile">个人中心</NavLink></li>
            </ul>
          </nav>
          <div>
            {/*Switch是匹配*/}
            {/*exact 我们匹配/斜杠时候，就匹配第一个*/}
            <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/user' component={User} />
              <Route path='/addPrize' component={AddPrize} />
              {/* <Route component={NoMatch} /> */}
            </Switch>
          </div>
        </div>

      </BrowserRouter>
    );
  }
}

export default App;
